<template>
    <div class="domain-center">
        <div class="container">
            <div class="index_center_left" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10" infinite-scroll-throttle-delay="80">
                <!-- 文章列表 -->
                <div class="article-container" v-for="(article,index) in this.article_data" :key="index">
                    <div class="article-cover">
                        <router-link :to="'/detail?contentId='+article.id">
                            <img style="width: 100%;max-height: 110px;" :src="article.cover"/>
                        </router-link>
                    </div>
                    <div class="article-desc">
                        <div class="artcle-title">
                            <div class="artcle-tag">
                                <el-tag v-if="article.adminToping==1">置顶</el-tag> 
                                <el-tag v-if="article.publisType==1" type="success">原创</el-tag> 
                                <el-tag v-if="article.publisType==2" type="danger">转载</el-tag> 
                            </div>
                            <router-link :to="'/detail?contentId='+article.id"><h3>{{article.title}}</h3></router-link>
                        </div>
                        <div class="artcle-description">{{article.artDesc}}</div>
                    </div>
                    <div class="article-info">
                        <div class="article-info-left">
                            <span><i class="el-icon-time"></i>{{article.publishTime}}</span>
                            <span>
                                <i class="el-icon-s-custom">
                                    <router-link :to="'/user?author_id='+article.user.id">{{article.user.nickName}}</router-link>
                                </i>
                            </span>
                            <span><i class="el-icon-collection-tag">{{article.artType}}</i></span>
                        </div>
                        <div class="article-info-right">
                            <span><i class="el-icon-chat-dot-square">999</i></span>
                            <span><i class="el-icon-view">999</i></span>
                        </div>
                    </div>
                </div>
                <div class="loading-data" v-if="data_loading">
                    <span class="loading-data-icon"><i class="el-icon-loading"></i></span>
                    <span class="loading-data-font">加载中...</span>
                </div>
                <div class="no-moredata" v-if="no_moredata">
                    <el-alert
                        title="没有更多了"
                        type="success"
                        effect="dark"
                        :center="true">
                    </el-alert>
                </div>
            </div>
            <div class="index_center_right_user">
                <article class="panel-side">
                    <div class="grid-weibo-show shadow-hover">
                        <header id="shead" :style="head_bakg">&nbsp;</header>
                        <div id="user-login" class="contentt">
                            <div class="avatar">
                                <img :src="this.$store.getters.loginData.avatar">
                                <i :title="this.$store.getters.loginData.nickName" class="author-ident" :style="this.$store.getters.loginData.bigV>0?islargV:''"></i>
                                <span class="rank"></span>
                                <div class="overlay">
                                    <a href="javascript:void(0)" v-if="!this.$store.getters.loginData.islogin" class="expand" @click="showLogin(true)">Login</a>
                                    <router-link :to="'/user?author_id='+this.$store.getters.loginData.id" v-if="this.$store.getters.loginData.islogin" class="expand"></router-link>
                                </div> 
                            </div>
                            <h4 v-if="this.$store.getters.loginData.islogin">{{this.$store.getters.loginData.nickName}}</h4>
                        </div>
                    </div>
                </article>
            </div>
            <div class="index_center_right_node">
                <p class="right-box-title">小站里程碑</p>
                <div class="user-time_line">
                    <el-timeline :reverse="reverse">
                        <el-timeline-item
                            v-for="(item,index) in update_history" :key="index" color="#0bbd87" type="success" size="large" :timestamp="formDate(item.publishTime)" placement="top">
                            <el-card>
                            <h4>{{item.content}}</h4>
                            <p>更新于 {{item.publishTime}}</p>
                            </el-card>
                        </el-timeline-item>               
                    </el-timeline>
                </div>
            </div>
        </div>
        <div style="clear:both"></div>
        <login_form :LoginDialogTableVisible="showlogin_dialog" @showLogin="showLogin(false)"></login_form>
    </div>
</template>

<script>
import { fetch } from '../../utils/httpRequest' 
import login_form from '../reuse/login'
export default { 
    components:{
        login_form
    },
    data:function(){
        return {
            reverse:true,
            showlogin_dialog: false,
            article_data:[],
            head_bakg:{
                'background': 'url('+this.$store.getters.loginData.backImg+') center center no-repeat'
            },
            islargV:{
                'background-position': '-50px -25px'
            },
            data_loading: false,
            no_moredata: false,
            busy: false,
            qyeryParam:{
                pageIndex:0,
                pageSize:10
            },
            update_history:[
                
            ]
        }
    },  
    created:function(){
        this.getUpdateHistory();
    },
    methods:{
        //加载首页文章数据
         getArticleList(){
            fetch(this.http.article_tourist.article.getArticle, this.qyeryParam).then(response => {
                if (response.success) {
                    if(response.data.records.length>0){
                        this.article_data=this.article_data.concat(response.data.records);
                        this.busy=false;
                    }else{
                        this.no_moredata=true;
                    }
                }
                this.data_loading=false;
            });
        },
        showLogin(result){
            this.showlogin_dialog=result;
        },
        //加载更多
        loadMore(){
            if(!this.busy){
            this.busy=true;
            this.data_loading=true;
            this.qyeryParam.pageIndex+=1;
            this.getArticleList();
            }
        },
        getUpdateHistory(){
            fetch(this.http.article_tourist.update_history.getUpdateHistory,{}).then((response)=>{
                this.update_history=response.data.records;
            })
        },
        formDate (time) {
            const thisTime = time.replace(/ /g, '/')
            var nowTime = new Date(thisTime)
            let y = nowTime.getFullYear();
            let MM = nowTime.getMonth() + 1;
            MM = MM < 10 ? ('0' + MM) : MM;
            let d = nowTime.getDate();
            d = d < 10 ? ('0' + d) : d;
            return y + '-' + MM + '-' + d;
        }
    }
}
</script>

<style scoped>
.right-box-title{
  clear: both;
  text-align: center;
  margin: 10px 0px;
  color: white;
  border-left: 5px solid #FF9800;
  line-height: 50px;
  background:linear-gradient(to right,#3ABEB3,rgb(232, 239, 175))
}
.article-cover{
    width: 25%;
    float: left;
}
.article-desc{
    float: left;
    width: 75%;
}
.article-info{
    clear: both;
}
.article-info-left{
    float: left;
}
.article-info-right{
    float: right;
}
.artcle-tag{
    padding-right: 5px;
    float: left;
}
.artcle-title h3{
    padding-top: 7px;
    vertical-align: middle;
    font-weight: bold;
    white-space: nowrap;  
    text-overflow:ellipsis; 
    overflow:hidden;
}
.artcle-description{
    clear: both;
    text-indent: 2em;
    font-size: 12px;
    line-height: 20px;
    margin-top: 5px;
    margin-left: 5px;
    height: 80px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
.artcle-title{
    margin-left: 5px;
}
.article-info-right,.article-info-left > span{
    font-size: 12px;
    color: #ccc;
}
.article-info-left > span:nth-child(n+2){
    padding: 0px 15px;
}
.article-info-left span:nth-child(2) a{
    color: #ccc;
}
.article-info-right > span:nth-child(1){
    padding: 0px 15px;
}
.article-container{
    background-color: white;
    border-radius: 10px;
    height: 135px;
    padding: 10px;
    overflow: hidden;
    line-height: 20px;
    margin-bottom: 10px;
}
@media screen and (max-width: 1200px){
    .index_center_right_user{
        display: none;
    }
    .index_center_right_node{
        display: none;
    }
}
@media screen and (min-width: 1200px){
    .index_center_left{
        width: 800px;
        float: left;
    }
    .index_center_right_user{
        width: 360px;
        float: right;
        margin-right: 15px;
        background-color: white;
    }
    .index_center_right_node{
        width: 360px;
        float: right;
        margin-right: 15px;
    }
    .index_center_right_user header{
        height: 100px;
        background-size: cover;
        position: relative;
        overflow: hidden;
    }
    .grid-weibo-show .contentt {
        padding: 20px 20px 5px 20px;
        height: 100%;
    }
    .grid-weibo-show .avatar {
        box-shadow: none;
        width: 90px;
        height: 90px;
        padding: 6px;
        background-color: rgba(255,255,255,.3);
        border-radius: 100%;
        margin: -70px auto 0 auto;
        position: relative;
    }
    .grid-weibo-show .avatar img {
        width: 90px;
        height: 90px;
        border-radius: 100%;
        vertical-align: middle;
    }
    .avatar .author-ident {
        display: inline-block;
        background-image: url(../../../static/images/icon.png);
        background-repeat: no-repeat;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        box-shadow: 0 0 4px rgba(0,0,0,.3);
        vertical-align: -2px;
        background-position:-50px -75px;
        position: absolute;
        bottom: 8px;
        right: 10px;
        z-index: 200;
    }
    .grid-weibo-show h4 {
        height: 26px;
        line-height: 26px;
        margin: 10px 0;
        font-weight: 700;
        font-size: 16px;
        text-align: center;
    }

    .grid-weibo-show .seta {
        text-align: center;
        font-size: 12px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .avatar .overlay {
        display: block;
        position: absolute;
        z-index: 20;
        background: rgba(0,0,0,.4);
        overflow: hidden;
        -webkit-transition: all .5s;
        -moz-transition: all .5s;
        -o-transition: all .5s;
        transition: all .5s;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        border-radius: 50%;
        opacity: 0;
        box-shadow: 0 0 5px 1px #ddd;
    }
    .avatar .overlay a.expand {
        position: absolute;
        z-index: 100;
        top: 45px;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        width: 100%;
        height: 100%;
        text-align: center;
        color: rgba(255,255,255,.9);
        line-height: 60px;
        font-size: 19px;
        -webkit-transition: all .5s;
        -moz-transition: all .5s;
        -o-transition: all .5s;
        transition: all .5s;
        display: block;
    }
    .avatar:hover .overlay {
        cursor:pointer;
        opacity: 1;
    }
}
.loading-data{
    text-align: center;
}
@media screen and (max-width: 500px){
    .article-container{
        height: 95px;
    }
    .artcle-description{
        height: 42px;
    }
}
</style>
